Angular Project Structure
Each angular application created will have default project structure with default template.
In this tutorial, we shall see the structure of an angular application.
Create an Angular Application
ng new angular-tutorial
This will ask you to enter an option where to create angular routing file. Press y to add angular routing.
Next it will ask you to select the styling type. By default it will be css, proceed with it.
Once the application is created the project structure looks as below.
When you open the src -> app folder we can see the following files.
- app-routing.module.ts
- app.component.css
- app.component.html
- app.component.spec.ts
- app.component.ts
- app.module.ts
Introduction to AppComponent
Open the app.component.ts file.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-tutorial';
}
Any class file that is decorated with @Component decorator will act as Component. In this project, app.component.ts will be loaded initially.
The app.component.html file acts as html template to be loaded for this component. This is set using the templateUrl parameter.
The styleUrls is an array which gets the list of styles that can be applied to the app.component.html.
The app.component.spec.ts file is used to wirte unit testing for the component.
Introduction to AppModule
The app.module.ts file will contain the following code.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
The app.module.ts file will contain bootstrap parameter, which is array that contains the name of the component to be loaded initially.
The AppComponent has been set by default to load initially. Its possible to change an other component here.
The assets folder will contain the static files like images, javascripts or other project's resources.
Environment in angular
The environments folder will contain two files environment.prod.ts and environment.ts file. These two files will contain configurations to be used for development environment and production environment.
If you run the application using ng serve, then the configuration in environment.ts file will be loaded.
If you build the application using ng build --prod, then configuration in environment.prod.ts will be loaded.
index.html
The index.html file contains the following code which will be loaded initially. It contains the app-root selector to load the AppComponent initially.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularTutorial</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
main.ts
The main.ts will contain the configuration to load the initial module. The AppModule will be loaded initially.
angular.json
The angular.json file is a JSON file with the configuration information which helps the build system in bundling the neccessary files.
package.json
The package.json will hold the npm packages that are needed to load the application.